﻿<%@ Page Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="TabOrientation.aspx.cs" Inherits="YUIAspNetDemo.TabView.TabOrientation" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <title>YUIAsp.Net Controls : LiveDemo : TabView : Orientation</title>
     <style type="text/css">
        .tabContainer {float:left; clear:both; width:90%;position:relative}
       /* h1 {width: 100%;clear: both}*/
     </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>TabView - tab orientation</h1>
    <p>YUIAsp.Net TabView control offers different orientations of the Tabs, as you can see below.</p>
    
    <h1>TabOrientation="Top" (default behaviour)</h1>
        <yui:TabView ID="tab" runat="server">
            <Tabs>
                <yui:TabItem ID="tab1" runat="server" Text="Demo 1">
                    <ContentTemplate>
                       Hello World from tab 1!<br /><br />
                       TabViews can be created from existing HTML markup or entirely through JavaScript. Each Tab in the TabView is a list item (&lt;li&gt;). The root element of the TabView is a &lt;div&gt; element.

The TabView control is defined by YAHOO.widget.TabView. To create a TabView from existing markup you can simply pass the id (or object reference) for the HTMLElement that will become the TabView. If you follow the default markup pattern outlined below, the tabs will be constructed automatically. The list item with class="selected" becomes the active tab.
                    </ContentTemplate>
                </yui:TabItem>
                <yui:TabItem ID="tab2" runat="server" Active="true" Text="Demo 2">
                    <ContentTemplate>
                        Hello World from tab 2!<br /><br />
                        Using TabView and Tab

This section describes several common uses and customizations of TabView and Tab instances and contains these subsections:

    * Handling Events
    * Configuration Attributes

                    </ContentTemplate>
                </yui:TabItem>
                <yui:TabItem ID="tab3" runat="server" Text="Demo 3">
                    <ContentTemplate>
                        Hello World from tab 3!<br /><br />
                        Handling Events

All of the the events for TabView and Tab (including DOM-based events such as "mouseover" or "click") can be listened for via addListener (or on for short).

Note: If you want to listen for DOM-based events you should always use the provided event interface rather than attaching handlers directly to a Tab or Tabview DOM elements.

The event object is passed to the handler function as the first argument. For DOM events, this is the actual event object.
                    </ContentTemplate>
                </yui:TabItem>
            </Tabs>
        </yui:TabView>
    
    <h1>TabOrientation="Bottom"</h1>
        <yui:TabView ID="TabView1" runat="server" Orientation="Bottom">
             <Tabs>
                <yui:TabItem ID="TabItem1" runat="server" Text="Demo 1">
                    <ContentTemplate>
                       Hello World from tab 1!<br /><br />
                       TabViews can be created from existing HTML markup or entirely through JavaScript. Each Tab in the TabView is a list item (&lt;li&gt;). The root element of the TabView is a &lt;div&gt; element.

The TabView control is defined by YAHOO.widget.TabView. To create a TabView from existing markup you can simply pass the id (or object reference) for the HTMLElement that will become the TabView. If you follow the default markup pattern outlined below, the tabs will be constructed automatically. The list item with class="selected" becomes the active tab.
                    </ContentTemplate>
                </yui:TabItem>
                <yui:TabItem ID="TabItem2" runat="server" Active="true" Text="Demo 2">
                    <ContentTemplate>
                        Hello World from tab 2!<br /><br />
                        Using TabView and Tab

This section describes several common uses and customizations of TabView and Tab instances and contains these subsections:

    * Handling Events
    * Configuration Attributes

                    </ContentTemplate>
                </yui:TabItem>
                <yui:TabItem ID="TabItem3" runat="server" Text="Demo 3">
                    <ContentTemplate>
                        Hello World from tab 3!<br /><br />
                        Handling Events

All of the the events for TabView and Tab (including DOM-based events such as "mouseover" or "click") can be listened for via addListener (or on for short).

Note: If you want to listen for DOM-based events you should always use the provided event interface rather than attaching handlers directly to a Tab or Tabview DOM elements.

The event object is passed to the handler function as the first argument. For DOM events, this is the actual event object.
                    </ContentTemplate>
                </yui:TabItem>
            </Tabs>
        </yui:TabView>
    
    <h1>TabOrientation="Left"</h1>
        <yui:TabView ID="TabView2" runat="server" Orientation="Left">
             <Tabs>
                <yui:TabItem ID="TabItem4" runat="server" Text="Demo 1">
                    <ContentTemplate>
                       Hello World from tab 1!<br /><br />
                       TabViews can be created from existing HTML markup or entirely through JavaScript. Each Tab in the TabView is a list item (&lt;li&gt;). The root element of the TabView is a &lt;div&gt; element.

The TabView control is defined by YAHOO.widget.TabView. To create a TabView from existing markup you can simply pass the id (or object reference) for the HTMLElement that will become the TabView. If you follow the default markup pattern outlined below, the tabs will be constructed automatically. The list item with class="selected" becomes the active tab.
                    </ContentTemplate>
                </yui:TabItem>
                <yui:TabItem ID="TabItem5" runat="server" Active="true" Text="Demo 2">
                    <ContentTemplate>
                        Hello World from tab 2!<br /><br />
                        Using TabView and Tab

This section describes several common uses and customizations of TabView and Tab instances and contains these subsections:

    * Handling Events
    * Configuration Attributes

                    </ContentTemplate>
                </yui:TabItem>
                <yui:TabItem ID="TabItem6" runat="server" Text="Demo 3">
                    <ContentTemplate>
                        Hello World from tab 3!<br /><br />
                        Handling Events

All of the the events for TabView and Tab (including DOM-based events such as "mouseover" or "click") can be listened for via addListener (or on for short).

Note: If you want to listen for DOM-based events you should always use the provided event interface rather than attaching handlers directly to a Tab or Tabview DOM elements.

The event object is passed to the handler function as the first argument. For DOM events, this is the actual event object.
                    </ContentTemplate>
                </yui:TabItem>
            </Tabs>
        </yui:TabView>
    
    <h1>TabOrientation="Right"</h1>
        <yui:TabView ID="TabView3" runat="server" Orientation="Right">
             <Tabs>
                <yui:TabItem ID="TabItem7" runat="server" Text="Demo 1">
                    <ContentTemplate>
                       Hello World from tab 1!<br /><br />
                       TabViews can be created from existing HTML markup or entirely through JavaScript. Each Tab in the TabView is a list item (&lt;li&gt;). The root element of the TabView is a &lt;div&gt; element.

The TabView control is defined by YAHOO.widget.TabView. To create a TabView from existing markup you can simply pass the id (or object reference) for the HTMLElement that will become the TabView. If you follow the default markup pattern outlined below, the tabs will be constructed automatically. The list item with class="selected" becomes the active tab.
                    </ContentTemplate>
                </yui:TabItem>
                <yui:TabItem ID="TabItem8" runat="server" Active="true" Text="Demo 2">
                    <ContentTemplate>
                        Hello World from tab 2!<br /><br />
                        Using TabView and Tab

This section describes several common uses and customizations of TabView and Tab instances and contains these subsections:

    * Handling Events
    * Configuration Attributes

                    </ContentTemplate>
                </yui:TabItem>
                <yui:TabItem ID="TabItem9" runat="server" Text="Demo 3">
                    <ContentTemplate>
                        Hello World from tab 3!<br /><br />
                        Handling Events

All of the the events for TabView and Tab (including DOM-based events such as "mouseover" or "click") can be listened for via addListener (or on for short).

Note: If you want to listen for DOM-based events you should always use the provided event interface rather than attaching handlers directly to a Tab or Tabview DOM elements.

The event object is passed to the handler function as the first argument. For DOM events, this is the actual event object.
                    </ContentTemplate>
                </yui:TabItem>
            </Tabs>
        </yui:TabView>
</asp:Content>
